<template>
  <div class="box">
    <div class="header">
       <van-nav-bar
        title="我的订单"
        left-arrow
        @click-left="$router.back()"
      />
    </div>
    <div class="content">
      <!-- 地址信息 -->
      <van-cell @click="onEdit" v-if="flag" :title="name + ' ' + tel"  size="large" is-link :label="showAddress" />
      <van-cell @click="onEdit" v-else title="请添加收获人信息"  size="large" is-link />
      <!-- 待支付商品 -->
      <van-card
        v-for="item of orderList"
        :key="item.orderid"
        :num="item.num"
        :price="item.originprice.toFixed(2)"
        :title="item.proname"
        :thumb="item.img1"
      />
      <!-- 优惠券单元格 -->
      <van-coupon-cell
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        @click="showList = true"
      />
      <!-- 优惠券列表 -->
      <van-popup
        v-model="showList"
        round
        position="bottom"
        style="height: 90%; padding-top: 4px;"
      >
        <van-coupon-list
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          :disabled-coupons="disabledCoupons"
          @change="onChange"
          @exchange="onExchange"
        />
      </van-popup>
    </div>
    <van-submit-bar
      :price="orderprice"
      button-text="提交订单"
      tip-icon="info-o"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Toast, Cell, CouponCell, CouponList, Popup, SubmitBar, ContactCard, Card } from 'vant'
import { confirmOrder } from './../../api/order'
import { defaultAddress } from '../../api/address'
Vue.use(NavBar)
Vue.use(Toast)
Vue.use(CouponCell)
Vue.use(CouponList)
Vue.use(Popup)
Vue.use(SubmitBar)
Vue.use(ContactCard)
Vue.use(Card)
Vue.use(Cell)
const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元'
}
export default {
  computed: {
    orderprice () {
      return this.orderList.reduce((sum, item) => {
        return sum + item.originprice * item.num
      }, 0) * 100
    },
    showAddress () {
      let str = ''
      this.province === this.city
        ? str = this.province + this.county + this.addressDetail
        : str = this.province + this.city + this.county + this.addressDetail
      return str
    }
  },
  data () {
    return {
      // 优惠券
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      showList: false,
      // 订单信息
      orderList: [],
      flag: false, // 判断有没有订单的地址信息
      name: '',
      tel: '',
      province: '',
      city: '',
      county: '',
      addressDetail: ''
    }
  },
  methods: {
    // 优惠券
    onChange (index) {
      this.showList = false
      this.chosenCoupon = index
    },
    onExchange (code) {
      this.coupons.push(coupon)
    },
    onEdit () {
      this.$router.push('/orderaddresslist/' + this.$route.params.time)
    },
    onSubmit () {
      Toast('提交中')
    }
  },
  mounted () {
    confirmOrder({
      userid: localStorage.getItem('userid'),
      time: this.$route.params.time
    }).then(res => {
      // console.log(res.data)
      this.orderList = res.data.data
      this.flag = res.data.flag
      // 收货人信息
      res.data.data.forEach(item => {
        console.log(item)
        this.name = item.name
        this.tel = item.tel
        this.province = item.province
        this.city = item.city
        this.county = item.county
        this.addressDetail = item.addressDetail
      })
    })
    defaultAddress({
      userid: localStorage.getItem('userid')
    }).then(res => {
      console.log(res)
    })
  }
}
</script>
